<template>
  <div>
    <vxe-grid v-bind="gridOptions" :height="height">
      <template #operate="{ row }">
        <el-button type="primary" link @click="handleDetail(row)">
          详情
        </el-button>
      </template>
      <template #pager>
        <vxe-pager
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  const handleDetail = (row) => {
    console.log(row)
  }

  const gridOptions = reactive({
    border: true,
    height: 300,
    align: 'center',
    loading: false,
    columnConfig: {
      resizable: true,
    },
    columns: [
      // { title: '序号', type: 'seq', width: 50 },
      { field: 'idNo', title: '申请ID' },
      { field: 'name', title: '申请类型' },
      { field: 'birthday', title: '关联信息' },
      { field: 'political', title: '申请状态' },
      { field: 'phone', title: '提交部门' },
      { field: 'unitName', title: '提交人' },
      { field: 'submitDate', title: '提交时间' },
      {
        title: '操作',
        width: 200,
        slots: { default: 'operate' },
        fixed: 'right',
      },
    ],
    data: [
      {
        idNo: 'xxx',
        name: 'xxxx',
        sex: '1',
        birthday: '2023-01-01 00:00:00',
        phone: '177xx',
        unitName: 'xxxxx',
        submitDate: 'xxx',
      },
    ],
  })

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
  }

  const height = ref(0)
  const $baseTableHeight = inject('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;

  .title {
    border-radius: 2px;
    border-left: 5px solid #1890ff;
    height: 28px;
    background: #f7f8f9;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    padding-left: 12px;
    line-height: 28px;
    margin-bottom: $margin-bottom;
  }

  .margin-top20 {
    margin-top: $margin-bottom;
  }
</style>
